<!-- 短信验证弹框 -->
<template>
  <cube-popup type="my-popup" position="bottom"
              :maskClosable="maskClosable" v-model="popVisible">
    <div class="m-shortmsg-wrap">
      <div class="m-shortmsg-head">请在<span>{{ time }}s</span>内操作完毕</div>
      <div class="m-shortmsg-tip">
        需要通过绑定的手机 {{ phone_number }}<br>进行身份验证以确保账户的资金安全</div>
      <div class="m-shortmsg-input">
        <input type="number" placeholder="请输入接收到的验证码" v-model="codeForm.code" viewneeded @focus="maskClosable=false" @blur="maskClosable=true">
        <button @click.prevent="getCode" :disabled="rTime > 0">{{ rTime > 0 ? "重新发送 "+rTime+'s' : '获取验证码' }}</button>
      </div>
      <button class="m-shortmsg-btn" :disabled="!isAuth" @click.prevent="submit">完成验证</button>
    </div>
  </cube-popup>
</template>

<script>
    import {checkAgentPayPassword } from 'api'
    import {versions, getQueryString, getHashString, isPoneAvailable} from 'common/js/utl'
    import {codeMixin} from 'src/mixin'

  export default {
      mixins: [codeMixin],
    props: {
        title: {
            type: String,
            default: '提示'
        },
        data: {
            type: Object,
            default: {}
        }
    },
    data(){
      return {
          maskClosable: true,
          time: 59,
          popVisible: false,
          captchaObj: null,
          isAuth: true,
          rTime: 0
      }
    },
      created(){
          Object.assign(this, this.data)
      },
      // mounted(){
      //   this.codeForm.name = this.$store.state.phone
      // },
      computed: {
          phone_number(){
              let phone_number = this.$store.state.phone
              this.codeForm.name = phone_number
              if(phone_number){
                  phone_number = phone_number.replace(new RegExp(`(\\d{3})\\d{${phone_number.length - 7}}(\\d{4})`), '$1****$2')
              }
              return phone_number || ''
          }
      },
      watch: {
          popVisible(nv){
              if(nv){
                  this.startTimeout()
              }else{
                  this.endTimeout()
              }
          }
      },
    methods: {
        getCode() {
            let phone_number = this.codeForm.name
            let phone_area = this.codeForm.phone_area
            if (this.rTime > 0) {
                return
            }
            // if (phone_number.length < 7 || (phone_area == '86' && !isPoneAvailable(phone_number))) {
            //     this.$warn('手机号错误')
            //     return
            // }
            if (phone_number.length < 7) {
                this.$warn('手机号错误')
                return
            }
            this.sendCode()
        },
        startTime() {
            this.rTime = 59
            this.rtimeInt = setInterval(() => {
                if (this.rTime < 2) {
                    clearInterval(this.rtimeInt)
                    this.rtimeInt = null
                }
                --this.rTime
            }, 1000)
        },
        async submit(){
            let {code} =  this.codeForm
            if(!code){
                return this.$warn('请输入验证码')
            }
            this.$emit('submit', code)
        },
        onSendCodeSuccess(params){
            this.isAuth = true
            this.startTime()
        },
        startTimeout(){
            this.time = 59
            this.setInterval = setInterval(()=>{
                if(this.time < 1){
                    this.endTimeout()
                    return this.payTimeout()
                }
                --this.time
            }, 1000)
        },
        endTimeout(){
          clearInterval(this.setInterval)
        },
        payTimeout(){
            this.hide()
            this.$emit('verifyTimeout')
        },
      show(){
            this.codeForm.code = ''
        this.popVisible = true
      },
        hide(){
            this.popVisible = false
        }
    }
  }
</script>

<style lang="scss">
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .m-shortmsg-wrap {
    background: #fff;
    padding-bottom: 34px;
  }

  .m-shortmsg-head {
    height: 88px;
    border-bottom: 1px solid #F5F5F5;
    font-size:34px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    span {
      color: #EB3257;
      padding: 0 5px;
    }
  }

  .m-shortmsg-tip {
    font-size:26px;
    color:rgba(32,44,91,1);
    line-height:39px;
    margin: 32px auto;
    text-align: center;
  }


  .m-shortmsg-input {
    width:690px;
    height:84px;
    background:rgba(246,247,248,1);
    border:2px solid rgba(227,227,227,1);
    border-radius:10px;
    margin: 0 auto 32px auto;
    display: flex;
    align-items: center;
    //overflow: hidden;
    input {
      border: 0;
      height: 100%;
      width: auto;
      outline: none;
      background: transparent;
      flex: 1;
      padding: 0 22px;
    }
    button {
      width:224px;
      height:100%;
      font-size:30px;
      color:rgba(255,255,255,1);
      display: flex;
      align-items: center;
      justify-content: center;
      @include button(0px);
      background: #173E8F;
      &:disabled {
        background:rgba(209,209,209,1);
      }
    }
  }


  .m-shortmsg-btn {
    margin: 0 auto;
    display: block;
    width:690px;
    height:84px;
    background:rgba(23,62,143,1);
    display: flex;
    align-items: center;
    justify-content: center;
    @include button(8px);
    font-size:32px;
    color:rgba(255,255,255,1);
    &:disabled {
      opacity:0.5;
    }
  }




</style>

<style>

  /*.cube-popup {*/
  /*  position: absolute;*/
  /*}*/
  /*.cube-popup-content {*/
  /*  top: -400px;*/
  /*}*/
</style>
